<template>
    <div class="container">
      <h1>用户登录</h1>
        <el-form :model="ruleForm" status-icon  label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="user">
                <el-input type="text" v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
                <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" v-if="user.isLogin">
                <el-input type="password" v-model="user.checkPass" autocomplete="off" @blur="checkPassword"></el-input><p>{{checkPassword() ? '':'两次密码不一致'}}</p>
            </el-form-item>

            <el-form-item label="性别" prop="sex" v-if="user.isLogin">
                <el-radio v-model="user.sex" label="女">
                  男
                </el-radio>
                <el-radio v-model="user.sex" label="男">
                  女
                </el-radio>
            </el-form-item>
            <el-form-item label="年龄"  v-if="user.isLogin">
                <el-input type="number" v-model="user.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日"  v-if="user.isLogin">
                <el-input type="date" v-model="user.birthday" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="registerForm()">注册</el-button>
                <el-button @click="loginForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from "axios";
import {mapActions} from "vuex"
import dayjs from 'dayjs';
  export default {
    name:"Login",  
    data() {
      return {
        user: {
          username: '',
          password: '',
          checkPass: '',
          sex:'',
          age:'',
          birthday:'',
          isLogin:false
        },
      }
    },
    methods: {
      getFormData(){
        let formData = new FormData();
        formData.append('username',this.user.username);
        formData.append('password',this.user.password);
        formData.append('sex',this.user.sex);
        formData.append('age',this.user.age);
        formData.append('birthday',this.user.birthday);
        return formData;
      },
      checkPassword(){
        if (this.user.password === this.user.checkPass) {
          return true
        }else{
          return false
        }
      },
      registerForm() {
        this.user.isLogin = true;
        let formData = this.getFormData();
        if (!this.checkPassword() ) {
          alert('请核对')
          return
        }
        if (this.user.username !== "" && this.user.password !== "" && this.user.sex !== "" && this.user.age !== "" && this.user.birthday !== "") {
          axios({
            method: 'post',
            url:'http://localhost:8081/register',
            data:formData,
            headers:{'Content-Type': 'application/form-data'}
        }).then((response) => {
            if(response.data.state == 200){
                alert('注册成功请登录')
            }else{
                alert(response.data.message);
            }
        })
        }
        
      },
      //发送打卡
      sendLock(){
        let time = dayjs().format("YYYY-MM-DD");
        let d = new FormData();
        d.append("lockTime",time);
        axios({
          url: 'http://localhost:8081/userlock',
          method: 'post',
          data:d,
          headers: {'Content-Type': 'application/form-data'}
        }).then(res=>{
          if (res.data.state === 200) {
            alert(res.data.message)
            this.getAllUserLock()
          }else{
            alert(res.data.message)
          }
        })
      },
      loginForm() {
        this.user.isLogin=false;
        let formData = this.getFormData();
        if (this.user.username !== "" && this.user.password !== "") {
          axios({
            method:'post',
            url:`http://localhost:8081/login`,
            data: formData,
            headers: {'Content-Type': 'application/form-data'},
        }).then((response) => {
            const data = response.data;
            if(data.state===200){
                this.sendLock()
                this.updateEssay('xiaoxue')

                axios.get("http://localhost:8081/getUser").then(res=>{
                  this.$store.commit('setUsername',res.data.data)
                })

                this.$router.push({
                    path:'/grade/xiaoxue'
                })

            }else{
                alert('error')
                this.ruleForm.user =""
                this.ruleForm.pass =""
                this.ruleForm.checkPass =""
            }
        })
        }
        
      },
      
      ...mapActions(['updateEssay'])
    }
  }
</script>
<style scoped>
.container {
    width:50%;
    margin:70px auto;
}
</style>